<template>
  <view class="container">
    <!-- 动态渲染每一类对比项 -->
    <view class="item-block" v-for="(item, index) in comparisonItems" :key="item.id">
      <view class="title">{{ item.title }}</view>
      
      <view v-for="(content, contentIndex) in item.contents" :key="contentIndex">
        <view class="content-block">
          <view class="label">
            <text class="label-text">优化前：</text>
            <view>
              <view v-if="content.beforeAdopt" class="adopt" @click="toggleSelection('beforeAdopt', index, contentIndex)">
                <text class="icon icon-checkmark-circle"></text>
                <text>采纳</text>
              </view>
              <view v-else class="unadopt" @click="toggleSelection('beforeAdopt', index, contentIndex)">
                <text class="icon icon-close-circle"></text>
                <text>不采纳</text>
              </view>
            </view>
          </view>
          <view class="content-text" :class="content.beforeAdopt? '': 'text-through improve'">{{ content.beforeOptimization }}</view>
        </view>
        
        <view class="content-block improve">
          <view class="label">
            <view>
              <text class="icon icon-improve"></text>
              <text class="label-text">优化后：</text>
            </view>
            <view>
              <view v-if="content.afterAdopt" class="adopt" @click="toggleSelection('afterAdopt', index, contentIndex)">
                <text class="icon icon-checkmark-circle"></text>
                <text class="adopt-text">采纳</text>
              </view>
              <view v-else class="unadopt" @click="toggleSelection('afterAdopt', index, contentIndex)">
                <text class="icon icon-close-circle"></text>
                <text class="unadopt-text">不采纳</text>
              </view>
            </view>
          </view>
          <view class="content-text" :class="content.afterAdopt? '': 'text-through improve'">{{ content.afterOptimization }}</view>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
export default {
  props: {
    resume: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    resume: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.setData(newVal);
        }
      },
      deep: true,
      immediate: true,
    }
  },
  data() {
    return {
      // 对比项数据
      comparisonItems: [],
    };
  },
  methods: {
    // 切换选择状态
    toggleSelection(e, index, contentIndex) {
      if (e === 'beforeAdopt') {
        this.comparisonItems[index].contents[contentIndex].beforeAdopt = 'beforeAdopt';
        this.comparisonItems[index].contents[contentIndex].afterAdopt = '';
      } else {
        this.comparisonItems[index].contents[contentIndex].beforeAdopt = '';
        this.comparisonItems[index].contents[contentIndex].afterAdopt = 'afterAdopt';
      }
    },
    setData(resume) {
      this.comparisonItems = [];
      this.comparisonItems.push({
        id: 'grzz',
        title: "自我评价",
        contents: [
          {
            beforeOptimization: resume.grzz || '',
            afterOptimization: resume.grzzOptimize || '',
            beforeAdopt: '',
            afterAdopt: 'afterAdopt',
          }
        ],
      });

      if (resume.edus && resume.edus.length) {
        let contents = [];
        resume.edus.forEach(item => {
          contents.push({
            beforeOptimization: item.edus || '',
            afterOptimization: item.eduDescOptimize || '',
            beforeAdopt: '',
            afterAdopt: 'afterAdopt',
          });
        });
        this.comparisonItems.push({
          id: 'edus',
          title: "教育背景",
          contents: contents,
        });
      }

      if (resume.work && resume.work.length) {
        let contents = [];
        resume.edus.forEach(item => {
          contents.push({
            beforeOptimization: item.workdesc || '',
            afterOptimization: item.workDescOptimize || '',
            beforeAdopt: '',
            afterAdopt: 'afterAdopt',
          });
        });
        this.comparisonItems.push({
          id: 'work',
          title: "工作经验",
          contents: contents,
        });
      }

      if (resume.project && resume.project.length) {
        let contents = [];
        resume.project.forEach(item => {
          contents.push({
            beforeOptimization: item.person_projectDesc || '',
            afterOptimization: item.person_projectDescOptimize || '',
            beforeAdopt: '',
            afterAdopt: 'afterAdopt',
          });
        });
        this.comparisonItems.push({
          id: 'project',
          title: "项目经验",
          contents: contents,
        });
      }
    },
    exportData() {
      let data = {};
      this.comparisonItems.forEach(item => {
        data[item.id] = [];
        item.contents.forEach(content => {
          data[item.id].push({
            value: content.beforeAdopt? content.beforeOptimization: content.afterOptimization,
          });
        });
      });
      return data;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 20rpx;
}

.item-block {
  margin-bottom: 24rpx;
  padding: 20rpx;
  background-color: #ffffff;
  box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.05);
  border-radius: 30rpx 30rpx 30rpx 30rpx;
}

.content-text {
  margin-top: 22rpx;
  font-weight: 400;
  font-size: 24rpx;
  color: #555555;
  line-height: 38rpx;
}

.text-through {
  color: #999999;
}

.title {
  margin: 12rpx 0 44rpx;
  font-weight: 500;
  font-size: 36rpx;
  color: #222222;
}

.content-block {
  margin-bottom: 20rpx;
  padding: 32rpx 24rpx 24rpx;
  border-radius: 20rpx;
  background: #FCFCFC;
}

.improve {
  background: rgba(255,213,150,0.08);
}

.label {
  display: flex;
  justify-content: space-between;
  font-weight: 500;
  font-size: 28rpx;
  color: #222222;
}

.label-text {
  vertical-align: middle;
}

.checkbox-group {
  display: flex;
  align-items: center;
}

.checkbox {
  margin-right: 10rpx;
}

.icon-checkmark-circle {
  margin-right: 8rpx;
  width: 28rpx;
  height: 28rpx;
  background-image: url($img-base + 'resume/success.png');
}

.icon-close-circle {
  margin-right: 8rpx;
  width: 28rpx;
  height: 28rpx;
  background-image: url($img-base + 'resume/unadopted.png');
}

.icon-improve {
  width: 36rpx;
  height: 36rpx;
  margin-right: 10rpx;
  background-image: url($img-base + 'resume/improve.png');
}

.adopt-text, 
.unadopt-text {
  vertical-align: middle;
}

</style>
